<template>
  <div class="hello">
    <div class="item" v-for="item in homelists" :key="item.cate_id">
      <router-link
        :to="{
          name: 'Live',
          query: { cate_id: item.cate_id, title: item.cate_name },
        }"
        >{{ item.cate_name }}</router-link
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeList",
  data() {
    return {
      homelists: [],
    };
  },
  created() {
    this.axios({
      url: "/api/v1/getColumnList",
      method: "GET",
    }).then((res) => {
      this.homelists = res.data.data;
      this.homelists.splice(0, 1);
    });
  },
};
</script>

<style scoped lang="less">
.hello {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(100vw / 3);
    line-height: 45px;
    outline: red dashed 1px;
    a {
      display: block;
      color: #000;
    }
  }
  .item:last-child {
    width: 100vw;
  }
}
</style>
